<template>
  <div class="bg-white">
    <el-page-header :content="title" @back="back"></el-page-header>
    <el-form ref="form" class="pa-10" :model="form" label-width="100px">
      <p class="bold">任务信息</p>
      <el-form-item label="任务名称">
        <span>{{ form.taskName }}</span>
      </el-form-item>
      <el-form-item label="执行时间">
        <span>{{ form.startTime }}-{{ form.endTime }}</span>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="责任部门">
            <span>{{ form.deptName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="责任人">
            <span>{{ form.directorName }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="任务描述">
        <span>{{ form.description }}</span>
      </el-form-item>
      <p class="bold">任务进展</p>
      <div v-for="item in form.progressList" :key="item.id" class="progress">
        <div>进展情况：{{ item.progress }}</div>
        <div>
          相关附件：<span class="downloadCls" @click="download(item)">{{ item.annexName }}</span>
        </div>
        <div>
          <el-row>
            <el-col :span="8"> 上报人：{{ item.createBy }} </el-col>
            <el-col :span="8"> 上报时间：{{ item.createAt }} </el-col>
          </el-row>
        </div>
      </div>
      <div v-if="$route.query.type !== 'view'" class="newPro">
        <div>
          <el-form-item label="进展状况">
            <el-input v-model="progressForm.progress" type="textarea"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="相关附件">
            <el-upload
              ref="upload"
              :action="uploadUrl"
              :headers="headers"
              :file-list="fileList"
              :limit="1"
              :on-change="handleChangeFile"
              :on-success="onSuccess"
              :on-preview="handlePreview"
              :on-exceed="onExceed"
              :on-remove="onRemove"
              accept=".jpg,.pdf,.doc,.docx"
              :before-upload="beforeUpload"
              :auto-upload="true"
            >
              <el-button icon="el-icon-upload" size="small"> 上传文件</el-button>
              <div slot="tip" class="el-upload__tip">支持文件格式：.jpg, .pdf,.doc,.docx单个文件不能超过5M</div>
            </el-upload>
          </el-form-item>
        </div>
      </div>
      <div v-if="$route.query.type == 'view'">
        <p class="bold">任务结论</p>
        <div v-if="form.conclusionVo" class="progress">
          <div>任务结论：{{ form.conclusionVo.conclusion }}</div>
          <div>
            相关附件：<span class="downloadCls" @click="download(form.conclusionVo)">{{
              form.conclusionVo.annexName
            }}</span>
          </div>
          <div>
            <el-row>
              <el-col :span="8"> 上报人：{{ form.conclusionVo.createBy }} </el-col>
              <el-col :span="8"> 上报时间：{{ form.conclusionVo.createAt }} </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <el-form-item label-width="0">
        <el-button size="mini" @click="back">{{ $route.query.type ? '确 定' : '取 消' }}</el-button>
        <el-button v-if="!$route.query.type" size="mini" type="primary" @click="submitForm">保 存</el-button>
        <el-button v-if="$route.query.type !== 'view'" size="mini" type="primary" @click="taskDialogVisable = true"
          >任务完结</el-button
        >
      </el-form-item>
    </el-form>
    <taskDialog
      v-if="taskDialogVisable"
      :management-id="form.id"
      :dialog-visible="taskDialogVisable"
      @closeDialog="closeDialog"
    ></taskDialog>
  </div>
</template>

<script>
import taskDialog from './dialog/taskDialog.vue'
import { personInfo } from '@/api/system/user'
import { requestTaskDetail, requestTaskProgessCreate, fileDownload } from '@/api/warning-task/task'
import { mapGetters } from 'vuex'

export default {
  name: 'Page',
  components: {
    taskDialog,
  },
  props: {},
  data() {
    return {
      taskDialogVisable: false,
      title: '任务进度上报',
      headers: {},
      uploadUrl: process.env.VUE_APP_BASE_API + 'jtx/task/management/upload',
      form: {},
      progressForm: {
        progress: '',
        annexUrl: '',
      },
      progress: [{}],
    }
  },
  computed: {
    ...mapGetters({
      token: 'token',
    }),
  },
  created() {
    this.headers = {
      Authorization: this.token,
    }
    this.getTaskDetail()
  },
  methods: {
    back() {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        if (this.$route.query.isHome) {
          this.$router.push({
            path: '/redirect/home/target-task',
            query: { isHome: this.$route.query.isHome },
          })
          return
        }
        this.$router.back()
      })
    },
    getTaskDetail() {
      requestTaskDetail({ id: this.$route.query.id }).then((res) => {
        this.form = res.data
      })
    },
    closeDialog(val) {
      this.taskDialogVisable = false
    },
    submitForm() {
      const param = {
        managementId: this.form.id,
        ...this.progressForm,
      }
      requestTaskProgessCreate(param).then((res) => {
        if (res.success) {
          this.$message({
            type: 'success',
            message: '操作成功',
          })
          this.back()
        } else {
          this.$message({
            type: 'error',
            message: res.message,
          })
        }
      })
    },
    onExceed() {
      this.$message.warning(`当前限制上传1个附件，请删除后继续上传！`)
    },
    handlePreview(val) {
      console.log(val)
      return
      window.open(val.response.data.url, '_blank')
    },
    onRemove(file, fileList) {
      this.fileList = []
      this.progressForm.annexUrl = null
    },
    handleChangeFile(file, fileList) {
      if (!file) return
      const isLt2M = file.size / 1024 / 1024 <= 5
      if (!isLt2M) {
        this.$refs.upload.clearFiles()
        this.$message({
          message: '单个文件大小不能超过 5MB!',
          type: 'warning',
        })
        return false
      }
      this.fileList = fileList
    },
    onSuccess(rsp, file, fileList) {
      if (rsp.success) {
        this.$message({
          type: 'success',
          message: '上传成功',
        })
        this.$set(this.progressForm, 'annexName', rsp.data.annexName)
        this.$set(this.progressForm, 'annexUrl', rsp.data.annexUrl)
        return
      }
      this.$message({
        type: 'error',
        message: rsp.message,
      })
    },
    async download(data) {
      let res = await fileDownload({ fileName: data.annexUrl })
      const url = window.URL.createObjectURL(new Blob([res], { type: 'charset=utf-8' }))
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', data.annexName)
      document.body.appendChild(link)
      link.click()
    },
  },
}
</script>

<style scoped lang="scss">
::v-deep .el-page-header {
  background-color: #ffff;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}
::v-deep .el-page-header__content {
  font-size: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: #262626;
}
.bg-white {
  min-height: 100%;
}
.bold {
  font-weight: bolder;
  margin: 20px 0;
}

.progress {
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 10px 0 6px 25px;
  margin-bottom: 10px;

  div {
    margin-bottom: 6px;
  }
}

.newPro {
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 10px 10px 10px 0;
}

// ::v-deep .el-form-item {
//   margin-bottom: 0px;

//   .el-form-item__label {
//     font-weight: normal;
//     font-size: 16px;
//     color: #000000;
//   }
// }
.downloadCls {
  cursor: pointer;
  color: var(--primary-color);
}
</style>
